<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableExpose } from '@/components/Table'
import { selDeptName ,selBackUserList, updBackUserEnabled , selJurisdiction,fenghaoone,fenghaotwo,fenghaothree,addRoleData,getDeptid,getAddchenggong,updBackUserInfo} from '@/api/houtaiguanli'
import { TableData } from '@/api/table/types'
import { ref, h, reactive, unref , onMounted} from 'vue'
import { ElTag, ElMessage , ElButton,ElMessageBox,ElRow ,ElCol,ElTree,ElSwitch,ElForm,ElFormItem,ElInput,ElSelect,ElOption,ElCheckbox,ElCheckboxGroup,ElAvatar,ElDialog,ElUpload,ElDatePicker,UploadInstance,FormInstance, FormRules,ElImage } from 'element-plus'
import { useTable } from '@/views/Order/OrderList'
import { Pagination, TableColumn, TableSlotDefault } from '@/types/table'
import { Form } from '@/components/Form'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { Descriptions } from '@/components/Descriptions'
import {FormSchema, FormSetPropsType} from "@/types/form";
import {DescriptionsSchema} from "@/types/descriptions";

//树形组件↓↓↓↓↓
let data = ref();

//树形菜单数据
selDeptName({}).then((res) =>{
    data.value = [res.data]
});

const defaultProps = {
    children: 'children',
    label: 'menuName'
}

// 表头
const columns = reactive<TableColumn[]>([
    {
        field: '',
        label: '序号',
        type: 'index'
    },
    {
        field: 'trueName',
        label: '用户姓名'
    },
    {
        field: 'avatarUrl',
        label: '用户头像',
        formatter: (row, column, cellValue, index) => {
            if (cellValue != '' && cellValue!= null){
                return h(
                    ElAvatar,
                    {
                        src:cellValue
                    }
                )
            }else {
                return "暂无图片"
            }
        }
    },
    {
        field: 'sex',
        label: '性别'
    },
    {
        field: 'account',
        label: '用户账号'
    },
    {
        field: 'deptName',
        label: '所属部门'
    },
    {
        field: 'enabled',
        label: '是否启用'
    },
    {
        field: 'status',
        label: '账号状态'
    },
    {
        field: 'registerTime',
        label: '注册时间'
    },
    {
        field: 'action',
        label: '操作'
    }
])

//表数据↓↓↓↓↓
const { register, tableObject, methods } = useTable<TableData>({
    getListApi: selBackUserList,
    response: {
        list: 'list',
        total: 'total'
    },
    props: {
        columns
    },
    defaultParams: {

    }
})

//调用方法
const { getList ,setSearchParams } = methods;

getList()

//查询组件
const schema = reactive<FormSchema[]>([
    {
        field: 'account',
        label: '用户账号：',
        component: 'Input'
    },
    {
        field: 'trueName',
        label: '用户姓名：',
        component: "Input"
    },
    {
        field: 'deptName',
        label: '所属部门：',
        component: "Input"
    },
    {
        field: 'registerTime',
        label: '注册时间：',
        component: "DatePicker",
        componentProps: {
            type: 'date',
            format: 'YYYY/MM/DD',
            valueFormat: 'YYYY-MM-DD'
        }
    }
])
let str = "trueName";

//左表查询
function NodeClick(a){
    // setSearchParams(a.id)
    selBackUserList({"deptId":a.id}).then((res) =>{
        console.log(res.data)
        tableObject.tableList = res.data
        tableObject.total = res.data.length
    });
}

let ShujuData = reactive({
    account: '',
    avatarUrl: '',
    birthDate: '',
    deptId: '',
    deptName: '',
    educationId: '',
    email: '',
    enabled: '',
    freestyle: '',
    grade: '',
    idCard: '',
    moneyId: '',
    password: '',
    path: '',
    phoneNumber: '',
    phoneNumber1: '',
    registerIp: '',
    registerTime: '',
    remark: '',
    sex: '',
    status: '',
    trueName: '',
    userId: '',
    wages: '',
})
let ChakanData = reactive({
    account:'',
    avatarUrl:'',
    birthDate:'',
    deptName:'',
    email:'',
    freestyle:'',
    idCard:'',
    phoneNumber:'',
    sex:'',
    trueName:''
})
const rowData = (data: TableSlotDefault) => {
    ChakanData = data
    lookOver.value = true
}

//封停
let shutDown = ref(false)
const FengtingrowData = (data: TableSlotDefault) => {
    ShujuData = reactive({
        account: '',
        avatarUrl: '',
        birthDate: '',
        deptId: '',
        deptName: '',
        educationId: '',
        email: '',
        enabled: '',
        freestyle: '',
        grade: '',
        idCard: '',
        moneyId: '',
        password: '',
        path: '',
        phoneNumber: '',
        phoneNumber1: '',
        registerIp: '',
        registerTime: '',
        remark: '',
        sex: '',
        status: '',
        trueName: '',
        userId: '',
        wages: '',
    })
    if (data.status != 2 && data.status != 3){
        ShujuData = data
        shutDown.value = true
    }else {
        shutDown.value = false
        ElMessage.error('该账号已冻结，请勿重复操作')
    }
}

//停用账号
function stopEnable(row) {
    if(row.status != 2 && row.status != 3){
        updBackUserEnabled({"enabled":row.enabled,"userId":row.userId}).then((res) =>{
            if (res) {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
            }else {
                ElMessage.error('修改失败')
            }

        });
    }else {
        ElMessage.error('你不能对已冻结的账号进行操作！')
        row.enabled = 2
    }
}

//查看
const lookOver = ref(false)

//权限
const purview = ref(false)

const des = reactive<DescriptionsSchema[]>([
    {
        field: 'username',
        label: '角色名',
        width: "80px",
        span: 24
    },
])

let desData = reactive({
    username : '',
    remark: '',
    permissions: '',
    allPermissions:'',
    user:{
        remark:''
    }
});
let remark = ref()
let test = ref([])
//定义四个字段对应权限的四个功能
let guanli = ref();
let jiaoshi= ref();
let yunying = ref();
let renshi = ref();
//再次定义四个对应不可更改按钮的字段
let guanlifinal = ref(false);
let jiaoshifinal= ref(false);
let yunyingfinal = ref(false);
let renshifinal = ref(false);
//点击权限按钮的事件
const purviewRowData = async (row) =>{
    //重置四个按钮的判断
    guanli.value = false
    jiaoshi.value = false
    yunying.value = false
    renshi.value = false
    //重置四个不可更改按钮
    guanlifinal.value = false
    renshifinal.value = false
    jiaoshifinal.value = false
    yunyingfinal.value = false
    remark.value = ''
    purview.value = true
    const res = await selJurisdiction({"userId":row.userId})
    desData = res.data
    if(desData.deptAuthority[0] == '/administrators'){
        guanlifinal.value = true
    }else if(desData.deptAuthority[0] == '/personnel'){
        renshifinal.value = true
    }else if(desData.deptAuthority[0] == '/teacher'){
        jiaoshifinal.value = true
    }else if(desData.deptAuthority[0] == '/operate'){
        yunyingfinal.value = true
    }
    for (var i=0;i<desData.permissions.length;i++){
        if (desData.permissions[i] == desData.deptAuthority[0]){
            if (desData.deptAuthority[0] == '/personnel'){
                renshi.value = true
            }else if(desData.deptAuthority[0] == '/administrators'){
                guanli.value = true
            }else if(desData.deptAuthority[0] == '/teacher'){
                jiaoshi.value = true
            }else if(desData.deptAuthority[0] == '/operate'){
                yunying.value = true
            }
        }
    }
    for (var i=0;i<desData.permissions.length;i++){
        if (desData.permissions[i] == '/personnel'){
            renshi.value = true
        }else if(desData.permissions[i] == '/administrators'){
            guanli.value = true
        }else if(desData.permissions[i] == '/teacher'){
            jiaoshi.value = true
        }else if(desData.permissions[i] == '/operate'){
            yunying.value = true
        }
    }
    if (desData.user.remark!='' && desData.user.remark!=null && desData.user.remark!=undefined){
        remark.value = desData.user.remark
    }
}

const boxchange = async(a) =>{
    if (a == 1){
        const res = await addRoleData({"value":1,"boo":guanli.value,"userId":desData.user.user_id})
        if (res) {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        }else {
            ElMessage.error('修改失败')
        }
    }else if(a == 2){
        const res = await addRoleData({"value":2,"boo":jiaoshi.value,"userId":desData.user.user_id})
        if (res) {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        }else {
            ElMessage.error('修改失败')
        }
    }else if(a == 3){
        const res = await addRoleData({"value":3,"boo":yunying.value,"userId":desData.user.user_id})
        if (res) {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        }else {
            ElMessage.error('修改失败')
        }
    }else if(a == 4){
        const res = await addRoleData({"value":3,"boo":renshi.value,"userId":desData.user.user_id})
        if (res) {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        }else {
            ElMessage.error('修改失败')
        }
    }
}

//编辑
const edit = ref(false)
const { t } = useI18n()
const fenghao = async () => {
    const res = await fenghaoone({"userId":ShujuData.userId,"type":2})
        const re = await fenghaotwo({"userId":ShujuData.userId,"type":3,"reason":ShujuData.remark,"days":ShujuData.educationId})
            const r = await fenghaothree({"userId":ShujuData.userId,"enabled":2,"status":3})
            if(r){
                shutDown.value = false
                ElMessage({
                    message: '封停成功',
                    type: 'success',
                })
                getList()
            }else {
                shutDown.value = false
                ElMessage.error('封停失败')
                getList()
            }
}
//新增功能
let xinzengguanliren = reactive({
    account: '',
    trueName: '',
    birthDate: '',
    deptId: '',
    sex:'',
    phoneNumber:'',
    idCard:'',
    email:'',
    freestyle:'',
    avatarUrl:''
})
    let xinzeng = ref(false)
let bumen = reactive({})
const AddGuanli = async () =>{
    xinzengguanliren = reactive({
        account: '',
        trueName: '',
        birthDate: '',
        deptId: '',
        sex:'',
        phoneNumber:'',
        idCard:'',
        email:'',
        freestyle:'',
        avatarUrl:''
    })
    const res = await getDeptid()
    if (res){
        bumen = res.data.children
        xinzeng.value = true
    }
}
let bianliang = ref(false)
const beforA = (file) =>{
    const isLt20M = file.size / 1024 / 1024 < 2000;
    if(!isLt20M){
        ElMessage.error('上传图片的大小不能超过20MB！')
    }
    return true;
}
const handleExceed = (files, fileList) =>{
    ElMessage.error(`最多上传1个图片`);
}
let dialogImageUrl = ref()
let dialogTupian = ref(false)

const handlePictureCardPreview =(file) =>{
    dialogImageUrl.value = file.url;
    dialogTupian.value = true;
}

const handleSuccess =async (response) =>{
    if(response>0){
        const res = await getAddchenggong({"account":xinzengguanliren.account,
            "trueName":xinzengguanliren.trueName,
            "sex":xinzengguanliren.sex,
            "phoneNumber":xinzengguanliren.phoneNumber,
            "idCard":xinzengguanliren.idCard,
            "birthDate":xinzengguanliren.birthDate,
            "deptId":xinzengguanliren.deptId,
            "email":xinzengguanliren.email,
            "freestyle":xinzengguanliren.freestyle,
            "userId":response})
        if (res){
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
            xinzeng.value = false
            bianliang.value = false
            getList()
        }else {
            ElMessage.error('添加失败！')
        }
    }
}
const handleFileChange = (file, fileList) =>{
    //判断图片列表长度大于0时，代表已上传本地图片
    if(fileList.length > 0){
        bianliang.value = true
    }
}
let toutupian = ref()
let tou = ref(false)
const handleFileChangetwo = (file, fileList) =>{
    if (file.url != toutupian){
        toutupian.value = file.url
        tou.value = true
    }
}
const uploadRef = ref<UploadInstance>()
const rules = reactive<FormRules>({
    account: [
        { required: true, message: '请输入账号！', trigger: 'blur' }
    ],
    trueName: [
        { required: true, message: '请输入昵称！', trigger: 'blur' },
    ],
    deptId: [
        {
            required: true,
            message: '请选择所在部门！',
            trigger: 'blur',
        },
    ],
})
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
    if (bianliang.value == true){
        if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            uploadRef.value!.submit()
        }
    })
    } else {
        ElMessage.error('请上传用户头像！')
    }
}
//编辑方法
let BianjiData = reactive({
    account:'',
    avatarUrl:'',
    birthDate:'',
    deptName:'',
    email:'',
    freestyle:'',
    idCard:'',
    phoneNumber:'',
    sex:'',
    trueName:'',
    deptId:'',
    userId:''
})
const editrowData = async(data: TableSlotDefault) =>{
    const res = await getDeptid()
    if (res){
        bumen = res.data.children
        BianjiData = data
        console.log(BianjiData)
        tou.value = false
        edit.value = true;
    }
}
const uploadReff = ref<UploadInstance>()
const editTijiao = async() => {
    if (tou.value == false){
        const res = await updBackUserInfo({
            "account":BianjiData.account,
            "birthDate":BianjiData.birthDate,
            "deptId":BianjiData.deptId,
            "email":BianjiData.email,
            "freestyle":BianjiData.freestyle,
            "idCard":BianjiData.idCard,
            "phoneNumber":BianjiData.phoneNumber,
            "sex":BianjiData.sex,
            "trueName":BianjiData.trueName,
            "userId":BianjiData.userId
        })
        if (res){
            edit.value = false
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            getList();
        }else {
            ElMessage.error('修改失败')
        }
    } else if(tou.value == true){
        console.log(BianjiData)
        uploadReff.value!.submit()
    }
}
const editTijiaotwo = async (response) =>{
    if(response>0){
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            toutupian.value = ''
            edit.value = false
            getList()
        }else {
            ElMessage.error('修改失败！')

        }
}
</script>

<template>
    <ElRow>
        <!--    左    -->
        <ElCol :span="4">
            <el-tree :data="data" :props="defaultProps" default-expand-all="true" @node-click="NodeClick" style="height: 195px" />
        </ElCol>
        <!--    右    -->
        <ElCol :span="20">
            <!-- 查询表单 -->
            <ContentWrap :title="`筛选查询`">
                <Search
                        :expand="true"
                        :expandField=str
                        :schema="schema"
                        @search="setSearchParams"
                        @reset="setSearchParams"
                />
            </ContentWrap>

            <br>
            <ElButton @click="AddGuanli" type="primary" round>添加管理员</ElButton>
            <ContentWrap :title="`后台管理员数据列表`">
                <Table
                        border="1px"
                        v-model:pageSize="tableObject.pageSize"
                        v-model:currentPage="tableObject.currentPage"
                        :columns="columns"
                        :data="tableObject.tableList.slice((tableObject.currentPage-1)*tableObject.pageSize,tableObject.currentPage*tableObject.pageSize)"
                        :loading="tableObject.loading"
                        @register="register"
                        :pagination="{total: tableObject.total}"
                >
                    <!--是否启用-->
                    <template #enabled="{row}">
                        <ElSwitch
                                v-model="row.enabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                @change="stopEnable(row)"
                                :inactive-value="2">
                        </ElSwitch>
                    </template>

                    <!--账号状态-->
                    <template #status="{row}">
                        <ElSwitch
                                disabled
                                v-model="row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="2">
                        </ElSwitch>
                    </template>

                    <template #action="{row}">
                        <ElButton @click="rowData(row)" type="primary" link size="small">
                            查看
                        </ElButton>
                        <ElButton @click="purviewRowData(row)" type="primary" link size="small">
                            权限
                        </ElButton>
                        <br>
                        <ElButton @click="editrowData(row)"  type="primary" link size="small" >
                            编辑
                        </ElButton>
                        <ElButton @click="FengtingrowData(row)" type="primary" link size="small" v-if="row.status!=2">
                            封停
                        </ElButton>
                        <ElButton @click="FengtingrowData(row)" type="primary" link size="small" v-if="row.status==2">
                            封停
                        </ElButton>
                    </template>

                </Table>
            </ContentWrap>

        </ElCol>
    </ElRow>
    <!--新增-->
    <Dialog v-model="xinzeng" open-delay="500" title="新增">
        <ElForm :inline="true" :model="xinzengguanliren" :rules="rules" ref="ruleFormRef">
            <div style="padding-left: 42%">
                <ElFormItem ref="crFile">
                    <ElUpload
                            ref="uploadRef"
                            class="upload-demo"
                            accept=".jpg,.png"
                            :auto-upload="false"
                            action="http://localhost:8081/personnel/addpagepromige"
                            list-type="picture"
                            :limit="1"
                            :before-upload="beforA"
                            :on-exceed="handleExceed"
                            :on-success="handleSuccess"
                            :on-change="handleFileChange"
                    >
                        <ElButton size="small" type="primary">点击上传头像图片</ElButton>
                    </ElUpload>
                </ElFormItem>
            </div>
            <div style="width: 730px">
                <ElFormItem label="账号" style="width: 210px" prop="account">
                    <ElInput placeholder="请输入账号" v-model="xinzengguanliren.account" />
                </ElFormItem>
                <ElFormItem label="账户昵称" style="width: 210px" prop="trueName">
                    <ElInput placeholder="请输入昵称" v-model="xinzengguanliren.trueName"/>
                </ElFormItem>
                <ElFormItem label="性别" style="width: 210px">
                    <ElSelect placeholder="请选择性别" v-model="xinzengguanliren.sex">
                        <ElOption label="男" value='男' />
                        <ElOption label="女" value='女' />
                        <ElOption label="保密" value='保密' />
                    </ElSelect>
                </ElFormItem>
            </div>
            <div style="width: 730px">
                <ElFormItem label="手机号" style="width: 210px">
                    <ElInput placeholder="请输入手机号" v-model="xinzengguanliren.phoneNumber"/>
                </ElFormItem>
                <ElFormItem label="身份证号" style="width: 210px">
                    <ElInput placeholder="请输入身份证号" v-model="xinzengguanliren.idCard"/>
                </ElFormItem>
                <ElFormItem label="出生日期" style="width: 210px">
                    <ElDatePicker
                            v-model="xinzengguanliren.birthDate"
                            type="datetime"
                            placeholder="请选择出生日期"
                            format="YYYY/MM/DD HH:mm:ss"
                            value-format="YYYY/MM/DD HH:mm:ss"
                    />
                </ElFormItem>
            </div>
            <div style="width: 730px">
                <ElFormItem label="所属部门" style="width: 330px" prop="deptId">
                    <ElSelect placeholder="请选择所属部门" v-model="xinzengguanliren.deptId">
                        <ElOption
                                v-for="item in bumen"
                                :label="item.menuName"
                                :value="item.id"
                        />
                    </ElSelect>
                </ElFormItem>
                <ElFormItem label="邮箱" style="width: 330px">
                    <ElInput placeholder="请输入邮箱号" v-model="xinzengguanliren.email"/>
                </ElFormItem>
            </div>
            <div>
                <ElFormItem label="个性签名" style="width: 690px">
                    <ElInput type="textarea" v-model="xinzengguanliren.freestyle" cols="40" rows="6"></ElInput>
                </ElFormItem>
            </div>
            <div style="text-align: center">
                <ElButton type="primary" @click="submitForm(ruleFormRef)">
                    添加
                </ElButton>
                <ElButton @click="xinzeng = false">{{ t('dialogDemo.close') }}</ElButton>
            </div>
        </ElForm>
    </Dialog>
    <!--查看-->
    <Dialog v-model="lookOver" open-delay="500" title="查看">
        <ElForm :inline="true" :model="ChakanData" ref="ruleFormRef" disabled>
            <div style="padding-left: 47%">
                <ElAvatar :size="80" :src="ChakanData.avatarUrl"></ElAvatar>
            </div>
            <div style="width: 730px">
                <ElFormItem label="账号" style="width: 210px">
                    <ElInput placeholder="请输入账号" v-model="ChakanData.account" />
                </ElFormItem>
                <ElFormItem label="账户昵称" style="width: 210px">
                    <ElInput placeholder="请输入昵称" v-model="ChakanData.trueName"/>
                </ElFormItem>
                <ElFormItem label="性别" style="width: 210px">
                    <ElSelect placeholder="请选择性别" v-model="ChakanData.sex"></ElSelect>
                </ElFormItem>
            </div>
            <div style="width: 730px">
                <ElFormItem label="手机号" style="width: 210px">
                    <ElInput placeholder="请输入手机号" v-model="ChakanData.phoneNumber"/>
                </ElFormItem>
                <ElFormItem label="身份证号" style="width: 210px">
                    <ElInput placeholder="请输入身份证号" v-model="ChakanData.idCard"/>
                </ElFormItem>
                <ElFormItem label="出生日期" style="width: 210px">
                    <ElDatePicker
                            v-model="ChakanData.birthDate"
                            type="datetime"
                            placeholder="请选择出生日期"
                            format="YYYY/MM/DD HH:mm:ss"
                            value-format="YYYY/MM/DD HH:mm:ss"
                    />
                </ElFormItem>
            </div>
            <div style="width: 730px">
                <ElFormItem label="所属部门" style="width: 330px">
                    <ElSelect placeholder="请选择所属部门" v-model="ChakanData.deptName"></ElSelect>
                </ElFormItem>
                <ElFormItem label="邮箱" style="width: 330px">
                    <ElInput placeholder="请输入邮箱号" v-model="ChakanData.email"/>
                </ElFormItem>
            </div>
            <div>
                <ElFormItem label="个性签名" style="width: 690px">
                    <ElInput type="textarea" v-model="ChakanData.freestyle" cols="40" rows="6"></ElInput>
                </ElFormItem>
            </div>
            <div style="text-align: center">
                <ElButton @click="lookOver = false">{{ t('dialogDemo.close') }}</ElButton>
            </div>
        </ElForm>
    </Dialog>
    <!--权限-->
    <Dialog v-model="purview" open-delay="500" title="权限">
        <Descriptions :data="desData" :schema="des" >
            <template #username="{row}">
                {{row.user.true_name}}
            </template>
        </Descriptions>
        <ElForm :model="desData">
            <div style="height: 30px;background-color: #FBFBFB;line-height: 30px;border: 1px solid #F1F1F1;padding-left: 20px">拥有权限</div>
            <ElFormItem>
                    <ElCheckbox label="管理" name="one" v-model="guanli" disabled v-if="guanlifinal"></ElCheckbox>
                    <ElCheckbox label="管理" name="one" v-model="guanli" @change="boxchange(1)" v-else></ElCheckbox>
                    <ElCheckbox label="人事" name="two" v-model="renshi" disabled v-if="renshifinal"></ElCheckbox>
                    <ElCheckbox label="人事" name="two" v-model="renshi" @change="boxchange(4)" v-else></ElCheckbox>
                    <ElCheckbox label="运营" name="three" v-model="yunying" disabled v-if="yunyingfinal"></ElCheckbox>
                    <ElCheckbox label="运营" name="three" v-model="yunying" @change="boxchange(3)" v-else></ElCheckbox>
                    <ElCheckbox label="教师" name="four" v-model="jiaoshi" disabled v-if="jiaoshifinal"></ElCheckbox>
                    <ElCheckbox label="教师" name="four" v-model="jiaoshi" @change="boxchange(2)" v-else></ElCheckbox>
            </ElFormItem>
            <div style="height: 30px;background-color: #FBFBFB;line-height: 30px;border: 1px solid #F1F1F1;padding-left: 20px">用户描述</div>
            <ElFormItem>
                <ElInput type="textarea" v-model="remark" cols="40" rows="6" placeholder="请输入内容" disabled></ElInput>
            </ElFormItem>
        </ElForm>
    </Dialog>

    <!--编辑-->
    <Dialog v-model="edit" open-delay="500" title="编辑">
        <ElForm :inline="true" :model="BianjiData" ref="ruleFormRef">
            <div style="padding-left: 43%">
                <ElAvatar :size="80" :src="BianjiData.avatarUrl" v-if="tou==false"></ElAvatar>
                <ElAvatar :size="80" :src="toutupian" v-if="tou==true"></ElAvatar>
            </div>
            <div style="padding-left: 42%">
                <ElFormItem ref="crFile">
                    <ElUpload
                            ref="uploadReff"
                            class="upload-demo"
                            accept=".jpg,.png"
                            :auto-upload="false"
                            action="http://localhost:8081/personnel/lzraddpagepromige"
                            :limit="1"
                            list-type="picture"
                            :before-upload="beforA"
                            :on-exceed="handleExceed"
                            :on-success="editTijiaotwo"
                            :on-change="handleFileChangetwo"
                            :data="{
                                    'birthDate':BianjiData.birthDate,
                                    'deptId':BianjiData.deptId,
                                    'email':BianjiData.email,
                                    'freestyle':BianjiData.freestyle,
                                    'idCard':BianjiData.idCard,
                                    'phoneNumber':BianjiData.phoneNumber,
                                    'sex':BianjiData.sex,
                                    'trueName':BianjiData.trueName,
                                    'userId':BianjiData.userId
                            }"
                    >
                        <ElButton size="small" type="primary">点击更换头像</ElButton>
                    </ElUpload>
                </ElFormItem>
            </div>
            <div style="width: 730px">
                <ElFormItem label="账号" style="width: 210px" dis>
                    <ElInput placeholder="请输入账号" v-model="BianjiData.account" disabled />
                </ElFormItem>
                <ElFormItem label="账户昵称" style="width: 210px">
                    <ElInput placeholder="请输入昵称" v-model="BianjiData.trueName"/>
                </ElFormItem>
                <ElFormItem label="性别" style="width: 210px">
                    <ElSelect placeholder="请选择性别" v-model="BianjiData.sex">
                        <ElOption label="男" value='男' />
                        <ElOption label="女" value='女' />
                        <ElOption label="保密" value='保密' />
                    </ElSelect>
                </ElFormItem>
            </div>
            <div style="width: 730px">
                <ElFormItem label="手机号" style="width: 210px">
                    <ElInput placeholder="请输入手机号" v-model="BianjiData.phoneNumber"/>
                </ElFormItem>
                <ElFormItem label="身份证号" style="width: 210px">
                    <ElInput placeholder="请输入身份证号" v-model="BianjiData.idCard"/>
                </ElFormItem>
                <ElFormItem label="出生日期" style="width: 210px">
                    <ElDatePicker
                            v-model="BianjiData.birthDate"
                            type="datetime"
                            placeholder="请选择出生日期"
                            format="YYYY/MM/DD HH:mm:ss"
                            value-format="YYYY/MM/DD HH:mm:ss"
                    />
                </ElFormItem>
            </div>
            <div style="width: 730px">
                <ElFormItem label="所属部门" style="width: 330px">
                    <ElSelect placeholder="请选择所属部门" v-model="BianjiData.deptId">
                        <ElOption
                                v-for="item in bumen"
                                :label="item.menuName"
                                :value="item.id"
                        />
                    </ElSelect>
                </ElFormItem>
                <ElFormItem label="邮箱" style="width: 330px">
                    <ElInput placeholder="请输入邮箱号" v-model="BianjiData.email"/>
                </ElFormItem>
            </div>
            <div>
                <ElFormItem label="个性签名" style="width: 690px">
                    <ElInput type="textarea" v-model="BianjiData.freestyle" cols="40" rows="6"></ElInput>
                </ElFormItem>
            </div>
            <div style="text-align: center">
                <ElButton type="primary" @click="editTijiao">
                    编辑
                </ElButton>
                <ElButton @click="edit = false">{{ t('dialogDemo.close') }}</ElButton>
            </div>
        </ElForm>
    </Dialog>

    <!--封停-->
    <Dialog v-model="shutDown" open-delay="500" title="封停">
        <ElForm :model="ShujuData" label-width="120px">
            <ElFormItem label="用户账号:">
                <ElInput v-model="ShujuData.account" />
            </ElFormItem>
            <ElFormItem label="封停天数">
                <ElSelect v-model="ShujuData.educationId" placeholder="请选择要封停的时长">
                    <ElOption label="7天" value=7 />
                    <ElOption label="30天" value=30 />
                    <ElOption label="365天" value=365 />
                </ElSelect>
            </ElFormItem>
            <ElFormItem label="封停原因">
                <el-input type="textarea" v-model="ShujuData.remark" cols="40" rows="6"></el-input>
            </ElFormItem>
        </ElForm>
        <div style="text-align: center">
                <ElButton type="primary" @click="fenghao">
                    {{ t('exampleDemo.save') }}
                </ElButton>
                <ElButton @click="shutDown = false">{{ t('dialogDemo.close') }}</ElButton>
        </div>
    </Dialog>

</template>
